<template>
  <div>
    <div class="org-detail-list">
      <Row>
        <Col class="detail-list-img" span="6">
          <img v-if="detail.photo === null" src="./../../../assets/images/avatar1.jpg" alt="">
          <img v-else :src="detail.photo" alt="">
        </Col>
        <Col class="detail-list-text" span="18">
          <p class="detail-name">{{detail.staffName}}</p>
          <p class="detail-text">{{detail.orgName}}</p>
          <p class="detail-text">{{detail.labelNameList.join('、')}}</p>
          <p class="detail-text">{{detail.remark}}</p>
        </Col>
      </Row>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'teacher-detail',
    data() {
      return {
        detail: {}
      }
    },
    mounted() {
      this.searchDetail()
    },
    methods: {
      searchDetail() {
        let id = this.$route.query.id
        this.$get('/api/api/org/app/teacher/getOne', {id: id}).then((res) => {
          if (res.code === 0) {
            this.detail = res.data
          }
        })
      }
    }
  }
</script>

<style scoped>
  .org-detail-list{
    width: 1200px;
    margin: 40px auto;
    margin-bottom: 40px;
  }
  .detail-list-img{
    height: 300px;
  }
  .detail-list-img img{
    margin: 20px;
    width: 260px;
    height: 260px
  }
  .detail-list-text{
    margin: 20px 0;
  }
  .detail-name{
    font-size: 20px;
    line-height: 40px;
  }
  .detail-text{
    line-height: 26px;
  }
</style>
